<template>
	<view>


		<view class="display">
			<view class="left" :style="{height:windowHeight+'vh'}">
				<block v-for="(item,index) in serviceList" :key="index">
					<view @click="selLeft(index,item.id)" :class="leftIndex == index ? 'sel-left' : 'no-sel-left'">
						{{item.classificationName}}
					</view>
				</block>
			</view>
			<view class="right">
				<block v-if="packageList.length > 0">
					<view class="provide-project flex-align-center" v-for="(item,index) in packageList" :key="index">
						<image :src="item.rotationChart"></image>
						<view class="remaining-width m-left20">
							<view class="font32 color333">{{item.tradeName}}</view>
							<view class="font-overflow color999 p-align-top10">
							</view>
							<view class="flex-align-center">

								<view class="bj-time golden  flex-align-center">
									<text class="font24 iconfont icon-shijian m-right10"></text>
									<view class="font24 m-bottom4">{{item.serviceTime}}分钟</view>
								</view>
							</view>
							<view class="flex-between p-top20">
								<view class="flex-align-center">
									<text class="font36 red">￥{{item.plusClockPrice}}</text>
									<view class="font24 color999 text-decoration ">￥{{item.originalServicePrice}}
									</view>
								</view>
							</view>
							<view>
							</view>
						</view>
						<checkbox-group @change="event=>checkeBoxPackage(event,item.id)">
							<label class="sunui-chekcbox-label">
								<checkbox :checked="item.checked"></checkbox>
							</label>
						</checkbox-group>
					</view>

				</block>
				<mescroll-empty v-else></mescroll-empty>
				<view class="fixed-bj flex" @click="saveCategory()">
					<view class="confirm-btn flex">确认并提交</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {

		mapMutations
	} from 'vuex'
	import {
		mapState
	} from 'vuex'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {

				imgUrl: this.$imgUrl,

				system: uni.getStorageSync("system"),

				name: '',

				cateList: [],
				leftIndex: '',

				list: [],

				windowHeight: '100',
				serviceList: [],
				selectServiceList: [],
				// 套餐列表
				packageList: [],
				categories: '',
				// 套餐数组
				packageArr: [],
				statusId: ''
			}
		},

		onLoad(options) {

			this.getServiceCategories();
			this.getByTechnicianCategory()
		},

		onShow() {


		},
		computed: {

			// 将 m_user 模块中的 userinfo 映射到当前页面中使用
			...mapState('user', ['basicAuthenticationForm', 'uploadQualificationForm', 'uploadHealthCertificateForm',
				'uploadAvatarForm', 'identityAuthenticationForm', 'technicianDetails'
			]),

		},
		methods: {

			...mapMutations('user', ['uploadProgress', 'uploadTaskCenter']),
			// 查询类目
			async getServiceCategories() {
				const result = await this.$http.get({
					url: this.$api.getByServiceCategoriesSiteId,
					data: {
						siteId: uni.getStorageSync('siteId') // 站点id
						// siteId: this.siteId // 站点id 
					}
				});
				if (result.code == 200) {
					console.log('查询类目result.', result);
					this.serviceList = result.data;

				} else {
					this.$sun.toast(result.message)
				}
			},

			async getByTechnicianCategory() {
				const res = await this.$http.get({
					url: this.$api.getSelectTechnicianId,
					data: {
						// siteId: uni.getStorageSync('siteId'), // 站点id
						// serviceCategoriesId: id
						technicianId: uni.getStorageSync('technicianId')
					}
				});
				console.log(res)
			},
			async checkeBoxPackage(event, id) {
				if (event.detail.value[0] == '') {
					//    console.log(this.packageList)
					// this.packageList.forEach((item) => {
					// 	this.$set(item, 'checked', false);
					// })
					// this.$at.uniDoFunc({
					// 	// 键名
					// 	key: 'submit',
					// 	success: async () => {
					// 		//锁定
					// 		this.$at.lockKey('submit');
					this.packageList.find(p => {
						if (id == p.id) {
							// 如果单个id对应相等，且checked存在，p.checked:true/存在那么false,否则为true
							p.checked ? (p.checked = false) : (p.checked = true);
							// this.$set(p, 'isCheckBox', true);

							this.packageArr.push({
								technicianId: uni.getStorageSync('technicianId'),
								packageId: id,
								categoriesId: this.categories
							})

							console.log(this.packageArr)


						}
					});
					const uniqueArray = Array.from(new Set(this.packageArr.map(JSON
						.stringify))).map(JSON
						.parse);
					uni.setStorageSync('savePackage', uniqueArray)
					console.log(uni.getStorageSync('savePackage') + '=====过滤后数组')
				} else {


					const index = uni.getStorageSync('savePackage').findIndex(item => {
						return item.id == id
					})

					this.packageArr = uni.getStorageSync('savePackage').splice(index, 1)
					this.$at.releaseKey('submit');
					uni.setStorageSync('savePackage', this.packageArr)
					console.log(this.packageArr)


				}

			},

			async getShopList(id) {


				// 获取套餐列表
				const result = await this.$http.get({
					url: this.$api.queryPackage,
					data: {
						serviceCategoriesId: id // 站点域名(传值将https截取)
					}
				});
				if (result.code == 200) {
					this.packageList = result.data;

					this.packageList.forEach((item) => {
						console.log(item.checked)
						item.checked ? (item.checked = true) : (item.checked = false);
						const resIndex = uni.getStorageSync('savePackage').findIndex((p) => {
							return item.id == p.packageId
						})

						console.log(resIndex + '------------------')
						if (resIndex != -1) {
							item.checked = true
						}


					})
				}

			},

			confirmChange(e) {
				this.name = e.detail.value;

			},
			async saveCategory() {

				console.log(this.technicianDetails.authenticationNot)
				this.uploadTaskCenter({
					status: true,
					name: 'serviceItemsEnd'
				})
			
				if (this.technicianDetails.authenticationNot == 3) {
					const res = await this.$http.put({
						url: this.$api.technicianModifyIphone,
						data: {
							id: uni.getStorageSync('technicianId'),
							userId: uni.getStorageSync('userId'),
							siteId: uni.getStorageSync('siteId'),
							authenticationNot: 3,
						}
					});
				} else {
					const res = await this.$http.put({
						url: this.$api.technicianModifyIphone,
						data: {
							id: uni.getStorageSync('technicianId'),
							userId: uni.getStorageSync('userId'),
							siteId: uni.getStorageSync('siteId'),
							authenticationNot: 2,
						}
					});
				}

				const uniqueArray = Array.from(new Set(uni.getStorageSync('savePackage').map(JSON
					.stringify))).map(JSON
					.parse);

				console.log(uniqueArray)
				const result = await this.$http.post({
					url: this.$api.savePackage,
					data: uniqueArray
					// data:this.packageArr
				});

				if (result.code == 200) {
					console.log('查询类目result.', result);
					uni.setStorageSync('savePackage', [])
					console.log(this.packageArr)
					this.packageArr = []
					this.$sun.navSwitch('/pages/my/my');

				} else {
					this.$sun.toast(result.message)
				}

			},
			selLeft(index, id) {
				console.log(index)
				this.leftIndex = index
				this.categories = id;
				this.getShopList(id);
			},
		}
	}
</script>

<style lang="scss">
	.provide-project {
		border-top: 2rpx solid #f4f4f4;
		background-color: #fff;
		padding: 20rpx 0;
		margin: 0px 10px;

		image {
			width: 192rpx;
			height: 192rpx;
			border-radius: 20rpx;
			margin-right: 10rpx;
		}

		// 右侧剩余宽度
		.remaining-width {
			width: calc(100% - 198rpx);

			button {
				border-radius: 76rpx;
				background-color: #406eff;
				color: #406eff;
				width: 150rpx;
				height: 54rpx;
				line-height: 54rpx;
				font-size: 28rpx;
				padding: 0rpx;
				margin: 0rpx;
			}

			.reservation-border {
				border: 2rpx solid #FF7B15;

				.reservation-img {
					width: 32rpx;
					height: 32rpx;
					background-color: #FF7B15;

					image {
						height: 30rpx;
					}
				}

				.reservation-text {
					margin: 0 10rpx;
					color: #EC724C;
					font-size: 24rpx;

				}
			}

			.bj-time {
				padding: 2rpx 16rpx 2rpx 6rpx;
				border-radius: 12rpx;
				background: linear-gradient(92deg, #3A2800 4.83%, #563600 96.02%);

				.m-bottom4 {
					margin-bottom: 4rpx;
				}
			}
		}
	}

	.shop-name {
		height: 80rpx;
		margin-bottom: 8rpx;
		font-size: 32rpx;
	}

	.shop-img {
		width: 240rpx;
		height: 240rpx;
		border-radius: 10rpx;
	}

	.version {
		width: 240rpx;
	}

	.index-54 {
		width: 138rpx;
		height: 138rpx;
		position: absolute;
		z-index: 99;
		// left: 93rpx;
		// top: 93rpx;
	}

	.frame {
		width: 240rpx;
		height: 240rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.right {
		width: 580rpx;
		padding: 20rpx 0 10rpx;

		.fixed-bj {
			z-index: 9;
			width: 100%;
			height: 200rpx;
			position: fixed;
			bottom: 0;
			left: 82rpx;
		}

		.confirm-btn {
			color: #fff;
			font-size: 36rpx;
			border-radius: 20rpx;
			background: #1890ff;
			width: 464rpx;
			height: 100rpx;
		}
	}

	.no-sel-left {
		text-align: center;
		padding: 26rpx 10rpx;
		color: #757575;
	}

	.sel-left {
		background-color: #406eff;
		text-align: center;
		padding: 30rpx 10rpx;
		color: #FFFFFF;
	}

	.left {
		width: 170rpx;
		background-color: #f7f7f7;
	}

	page {
		background-color: #FFFFFF;
		padding-top: 20rpx;
	}

	.search {
		width: 700rpx;
		background-color: #F7F7F7;
		padding: 16rpx 20rpx;
		border-radius: 100rpx;
		margin: 0 25rpx 20rpx;

		>input {
			width: 520rpx;
			height: 48rpx;
			margin-left: 20rpx;
		}
	}
</style>